<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2024-01-14 21:58:52
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-17 21:04:01
 * @FilePath: \vue3_admin_template\project\src\views\product\trademark\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
// 品牌管理
<template>
  <el-card>
    <!-- 卡片顶部添加品牌的按钮 -->
    <el-button
      type="primary"
      icon="Plus"
      size="default"
      @click="addTradeMark"
      v-has="`btn.Trademark.add`"
    >
      添加品牌
    </el-button>
    <!-- 表格组件 用于展示已有的平台数据
    tableData 表格数据 
        bborder  可以设置表格纵向是否有边框
        table-column 
            label:某一个列表
            width 表格这一列的宽度
            align :设置这一列对齐方式    
    -->
    <el-table
      border
      :data="trademarkArr"
      style="margin: 10px 0 10px 0; width: 100%"
    >
      <!-- el-table-column  默认展示数据用div-->
      <el-table-column prop="id" label="序号" align="center" width="80px" />
      <el-table-column prop="tmName" label="品牌名称" align="center" />
      <el-table-column label="品牌LOGO" align="center">
        <template #default="scope">
          <div class="logo-box">
            <img
              :src="scope.row.logoUrl"
              alt="暂无图片"
              style="width: 100px; height: 100px"
              crossorigin="anonymous"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="创建时间" align="center" />
      <el-table-column prop="address" label="品牌操作" align="center">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="updateTradeMark(scope.row)"
            v-has="`btn.Trademark.update`"
          >
            <el-icon :size="20">
              <Edit />
            </el-icon>
          </el-button>
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="Delete"
            icon-color="#FF1900"
            :title="`确定要删除${scope.row.tmName}么?`"
            @confirm="removeTrdemark(scope.row.id)"
            @cancel="cancelEvent"
            width="250px"
          >
            <template #reference>
              <el-button
                type="primary"
                size="small"
                v-has="`btn.Trademark.remove`"
              >
                <el-icon :size="20">
                  <Delete />
                </el-icon>
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器组件 -->
    <!-- pagination 
    v-modelLcurrent-page 设置分页器当前页码
    v-model:page-size 设置每一个展示数条数
    page-sizes 用于设置下拉菜单数据
    background 设置分页器的背景颜色 
    @current-change="currentPageNo"
      @size-change="sizeChange" 
   -->
    <el-pagination
      @size-change="getHasTradmark"
      @current-change="getHasTradmark"
      v-model:current-page="pageNo"
      v-model:page-size="limit"
      :page-sizes="[3, 5, 7, 9, 11]"
      :background="true"
      :pager-count="5"
      layout="  prev, pager, next, jumper,->,sizes,total,"
      :total="total"
    />
  </el-card>
  <!-- 添加品牌对话框 -->
  <Dialog
    v-model="dialogFormVisible"
    :titleActive="titleActive"
    :handleSubmit="handleSubmit"
    :currTradeMark="currTradeMark"
    ref="tradeMarkDialogInstance"
  ></Dialog>
</template>

<script setup lang="ts">
import {
  reqHasTradmark,
  reqAddOrUpdateTrademark,
  reqDeleteTrademark,
} from '@/api/product/trademark'
import Dialog from '@/components/Dialog/Dialog.vue'
import type {
  Records,
  TradeMarkResponseData,
} from '@/api/product/trademark/type'
import { ref, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
//当前页码
let pageNo = ref<number>(1)
//每页显示条数
let limit = ref<number>(3)
let total = ref<number>(0)
//表格数据
let trademarkArr = ref<Records>([])
let titleActive = ref('') //添加或者修改品牌
//控制添加或编辑品牌的对话框
let dialogFormVisible = ref(false)
let currTradeMark = ref({}) //当前正在修改的品牌数据
let tradeMarkDialogInstance = ref() //添加品牌对话框实例
//获取获取已有品牌的接口封装为一个函数:在任何情况下获取数据调用此函数即可
const getHasTradmark = async (pager = 1) => {
  pageNo.value = pager
  let result: TradeMarkResponseData = await reqHasTradmark(
    pageNo.value,
    limit.value,
  )
  if (result.code == 200) {
    trademarkArr.value = result.data.records
    total.value = result.data.total
  }
}
//当前页码发生变化
//对于当前页码发生变化的自定事件,组件pagination父组件回传了数据(当前页码的数据)
// const currentPageNo = (value: any) => {
//   pageNo.value = value
//   getHasTradmark()
// }
// //每页条数发生改变
// const sizeChange = (value: any) => {
//   limit.value = value
//   getHasTradmark()
// }

//添加品牌
const addTradeMark = () => {
  titleActive.value = '添加'
  dialogFormVisible.value = true
  //调用子组件清除表单验证信息
  //第一种 ts的 问号?语法tradeMarkDialogInstance 实例存在的情况下调用clearFormVallidate()方法
  //   tradeMarkDialogInstance?.value.clearFormVallidate()
  //第二种 nextTick Dom模板更新后调用回调方法
  nextTick(() => {
    tradeMarkDialogInstance?.value.clearFormVallidate()
  })
}
//修改品牌
const updateTradeMark = (row: any) => {
  //调用子组件清除表单验证信息
  //第一种 ts的 问号?语法tradeMarkDialogInstance 实例存在的情况下调用clearFormVallidate()方法
  //   tradeMarkDialogInstance?.value.clearFormVallidate()
  //第二种 nextTick Dom模板更新后调用回调方法
  nextTick(() => {
    tradeMarkDialogInstance?.value.clearFormVallidate()
  })
  currTradeMark.value = {
    id: row.id,
    tmName: row.tmName,
    logoUrl: row.logoUrl,
  }
  //   Object.assign(currTradeMark.value, row)
  //   console.log("currTradeMark",currTradeMark.value);
  titleActive.value = '修改'
  dialogFormVisible.value = true
}
//添加或修改品牌确定事件回调
const handleSubmit = async (data: any) => {
  delete data.updateTime
  let result: any = await reqAddOrUpdateTrademark(data)
  if (result.code == 200) {
    dialogFormVisible.value = false
    ElMessage.success(`${data.id ? '修改' : '添加'}品牌成功!`)
    //再重新发请求获取一下数据
    getHasTradmark(data.id ? pageNo.value : 1)
  } else {
    ElMessage.error(`${data.id ? '修改' : '添加'}品牌失败!`)
    dialogFormVisible.value = false
  }
}
//气泡确认框删除品牌数据数据确定
const removeTrdemark = async (id: number) => {
  let result = await reqDeleteTrademark(id)
  if (result.code == 200) {
    ElMessage({
      type: 'success',
      message: '删除品牌成功',
    })
    getHasTradmark(
      trademarkArr.value.length > 1 ? pageNo.value : pageNo.value - 1,
    )
  } else {
    ElMessage({
      type: 'error',
      message: '删除品牌失败',
    })
  }
}

const cancelEvent = () => {}
onMounted(async () => {
  //组件加载完成后获取已有品牌数据
  getHasTradmark()
})
</script>

<style lang="scss" scoped></style>
